<template>
  <div style="height: 100%" class="workspace">
    <div
      ref="listWarp"
      v-if="isFlag"
      style="height: 100%; background-color: #fff"
    >
      <div style="display: flex">
        <span style="color: #999999">帖子类型：</span>
        <el-tabs
          v-model="activeComm"
          style="margin-left: 50px; margin-top: -10px"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="主贴"
            name="1"
            @click="changeList()"
          ></el-tab-pane>
          <el-tab-pane
            label="跟帖"
            name="2"
            @click="changeList()"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="activeComm == '1'">
        <div class="left_list" id="left_list">
          <!-- 循环列表 -->
          <div
            :href="item.id"
            v-for="(item, index) in mainList"
            :key="index"
            style="cursor: pointer; border-bottom: 1px dashed #f1f1f1"
          >
            <div class="comment">
              <div class="comment_top" @click="toDetail(item, '1')">
                <div>
                  <span class="complain" v-if="item.serverType == '0'"
                    >投诉</span
                  >
                  <span class="suggest" v-if="item.serverType == '1'"
                    >建议</span
                  >
                  <span class="consult" v-if="item.serverType == '2'"
                    >咨询</span
                  >
                  <span class="praise" v-if="item.serverType == '3'">表扬</span>
                  <span class="canteen" style="font-weight: 600">{{
                    item.postTitle
                  }}</span>
                </div>
                <span class="state_0" v-if="item.status == '3'">已驳回</span>
                <span class="state_1" v-else-if="item.official.length > 0"
                  >已回复</span
                >
                <span class="state_0" v-else>未回复</span>
              </div>
              <div
                class="comment_content"
                style="padding-top: 10px"
                @click="toDetail(item, '1')"
              >
                {{ item.content }}
              </div>
              <div class="text-box">
                <div class="bottom">
                  <div class="icon_text">
                    <div>
                      <img src="@/assets/image/icon_ren.png" mode />
                      <span>{{ item.postUserName }}</span>
                    </div>
                    <div
                      class="comment_time"
                      style="display: flex; align-items: center"
                    >
                      <img src="@/assets/image/icon_time.png" alt />
                      <span space="emsp">{{
                        item.createTime.substring(0, 16)
                      }}</span>
                    </div>
                  </div>
                  <span
                    class="icon_text"
                    style="display: flex; align-items: center"
                  >
                    <img
                      src="@/assets/image/icon_location.png"
                      class="location"
                    />
                    <span>{{ item.serviceScopeName }}</span>
                  </span>
                </div>
                <div class="zan">
                  <div>
                    <img src="@/assets/image/icon_read.png" class="location" />
                    <span>浏览({{ item.clicks }})</span>
                  </div>
                  <div class="icon_text">
                    <img
                      src="@/assets/image/icon_comment.png"
                      class="location"
                    />
                    <span>评论({{ item.replyCount }})</span>
                  </div>
                  <div class="icon_text">
                    <img src="@/assets/image/icon_zan.png" class="location" />
                    <span>点赞({{ item.likeCount }})</span>
                  </div>
                </div>
              </div>
              <div class="imgShow" v-if="item.images">
                <div
                  @click="privew(item)"
                  class="image_div"
                  :data-background="value"
                  :style="
                    'background: url(' +
                    value +
                    ') center no-repeat;background-size: contain;'
                  "
                  v-for="(value, index) in item.images"
                  :key="index"
                ></div>
              </div>
              <div
                class="officalBox"
                v-if="item.official && item.official.length > 0"
                @click="toDetail(item, '1')"
              >
                <div class="officalBoxTop">
                  <div style="color: #2c65c1">
                    【官方回复】{{ item.deptName }}
                  </div>
                  <div class="time">
                    {{ item.official[0].createTime.substring(0, 16) }}
                  </div>
                </div>
                <div class="officalBoxText">
                  <span class="officalBox-content" style="color: #343434">{{
                    item.official[0].content
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeComm == '2'">
        <div
          class="comment"
          v-for="(item, index) in genList"
          :key="index"
          @click="toDetail(item, '2')"
          style="cursor: pointer"
        >
          <div class="comment_top">
            <div class="left icon_text">
              <img
                src="@/assets/image/icon_moren.png"
                style="margin-right: 8px; border-radius: 50%"
              />
              <span>{{ userName.substring(0, 1) }}**</span>
            </div>
            <div class="icon_text">
              <img
                src="@/assets/image/icon_time.png"
                alt
                style="margin-right: 10px"
              />
              <span>{{ item.replyTime.substring(0, 16) }}</span>
            </div>
          </div>
          <div style="margin-top: 8px">回复：{{ item.replyContent }}</div>
          <div class="officalBox">
            <div class="officalBoxTop">
              <div style="color: #333333; font-size: 16px; font-weight: 600">
                {{ item.postTitle }}
              </div>
            </div>
            <div class="officalBoxText">
              <span
                class="officalBox-content"
                style="color: #343434; font-size: 15px"
                >{{ item.content }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <el-footer
        style="height: 50px; background-color: #fff; line-height: 30px"
        class="page-footer"
      >
        <el-pagination
          style="padding-top: 10px; background-color: #fff; text-align: center"
          background
          layout="prev, pager, next,jumper,total,sizes"
          @size-change="evtPageSizeChange"
          @current-change="evtPageCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100, 500]"
          :total="totalRows"
          v-if="totalRows > 0"
        ></el-pagination>
      </el-footer>
    </div>
    <supervision ref="super" v-else></supervision>
  </div>
</template>

<script>
import { superviseApi } from "@/api/home/supervise.js";
import supervision from "@/views/home/mySupervision/detail";
export default {
  components: { supervision },
  data() {
    return {
      activeComm: "1",
      userName: "",
      mainList: [], //主贴
      genList: [], //跟贴
      PageSize: 20,
      PageIndex: 1,
      totalRows: 0,
      currentPage: 1,
      isFlag: true,
    };
  },
  methods: {
    // 点击做跳转详情页
    toDetail(item, type) {
      this.isFlag = false;
      setTimeout(() => {
        if (type == "1") {
          this.getGenDetail(item.id);
        } else {
          this.getGenMineDetail(item.id);
        }
        this.getMainDetail(item.id);
        this.$refs.super.type = type;
      }, 100);
    },
    //图片预览
    privew(item) {
      window.open(item.images, "_blank");
    },
    // 获取跟帖
    getGenDetail(id) {
      superviseApi.getGenDetailList(id).then((res) => {
        if (res.status == "success") {
          this.$refs.super.genDetail = res.data;
        }
      });
    },
    // 获取我的跟帖
    getGenMineDetail(id) {
      superviseApi.getGenDetailMineList(id).then((res) => {
        if (res.status == "success") {
          this.$refs.super.genDetail = res.data;
        }
      });
    },
    // 获取主贴
    getMainDetail(id) {
      superviseApi.getMainDetail(id).then((res) => {
        if (res.status == "success") {
          // 循环遍历的是list_data时，图片数据处理
          if (res.data && res.data.images) {
            var imgArr = res.data.images.split(",");
            for (var i = 0; i < imgArr.length; i++) {
              imgArr[i] = this.$itsoftUI.config.fileImgUrl + imgArr[i];
            }
            res.data.images = imgArr;
          }
          this.$refs.super.mainDetail = res.data;
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.activeComm == "2") {
        this.getGenList();
      } else {
        this.getMainList();
      }
    },
    evtPageSizeChange(val) {
      //每页数量
      this.PageSize = val;
      if (this.activeComm == "2") {
        this.getGenList();
      } else {
        this.getMainList();
      }
    },
    evtPageCurrentChange(val) {
      //分页
      this.PageIndex = val;
      if (this.activeComm == "2") {
        this.getGenList();
      } else {
        this.getMainList();
      }
    },
    // 获取用户信息
    getUserInfo() {
      this.$itsoftUI.getUserInfo().then((res) => {
        this.userName = res.name;
        console.log(res);
      });
    },
    // 主贴列表
    getMainList() {
      superviseApi.getMainList(this.PageSize, this.PageIndex).then((res) => {
        if (res.status == "success") {
          // 循环遍历的是list_data时，图片数据处理
          if (res.data.rows && res.data.rows.length > 0) {
            res.data.rows.forEach((item) => {
              if (item.images && item.images.length > 0) {
                var imgArr = item.images.split(",");
                for (var i = 0; i < imgArr.length; i++) {
                  imgArr[i] = this.$itsoftUI.config.fileImgUrl + imgArr[i];
                }
                item.images = imgArr;
              }
            });
          }
          this.mainList = res.data.rows;
          this.totalRows = res.data.total;
        }
      });
    },
    getGenList() {
      superviseApi.getGenList(this.PageSize, this.PageIndex).then((res) => {
        if (res.status == "success") {
          this.genList = res.data.rows;
          this.totalRows = res.data.total;
        }
      });
    },
  },
  created() {
    this.getMainList();
    this.getUserInfo();
  },
};
</script>


<style lang="scss" scoped>
.page-footer {
  border: 0px solid #e3e8ee;
}
.icon_text {
  display: flex;
  align-items: center;
}
.officalBoxText[data-v-7ac4ea84] {
  padding-left: 0;
}
/* 列表样式 */
.left_list > div:first-child .comment {
  padding-top: 0px !important;
}
.page-footer {
  border: 0px solid #e3e8ee;
}
.icon_text {
  display: flex;
  align-items: center;
}
.officalBoxText[data-v-7ac4ea84] {
  padding-left: 0;
}
/* 列表样式 */
.left_list .comment {
  padding: 25px 0;
  padding-right: 15px;
}
.left_list .comment:last-child {
  border-bottom: 0;
}

.comment_top .suggest {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #e7f0ff;
  color: #3080ff;
  border-radius: 4px;
}
.comment_top .complain {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #ffe7e7;
  color: #f04242;
  border-radius: 4px;
}
.comment_top .consult {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #ffe8ca;
  color: #955f18;
  border-radius: 4px;
}
.comment_top .praise {
  display: inline-block;
  text-align: center;
  width: 46px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background-color: #cdf3da;
  color: #2d9f55;
  border-radius: 4px;
}
.comment_top .canteen {
  margin-left: 11px;
  color: #000000;
  font-size: 15px;
  font-weight: blod;
}
.comment_top .state_1 {
  font-size: 12px;
  width: 56px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #666666;
}
.comment_top {
  display: flex;
  justify-content: space-between;
}
.comment_top .state_0 {
  font-size: 12px;
  width: 56px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border: 1px solid #f47c48;
  border-radius: 4px;
  color: #eb4e09;
}
.left_list .comment:last-child {
  border-bottom: 0;
}

.comment .bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}
.comment .bottom .icon_text {
  display: flex;
  text-align: center;
}

.comment .bottom .icon_text:last-child {
  text-align: right;
}

.comment .bottom .comment_time {
  margin-left: 15px;
  margin-right: 25px;
  display: flex;
  align-items: center;
}
.comment .bottom .icon_text img {
  position: relative;
  bottom: -3px;
  left: 0;
  margin-right: 10px;
  width: 14px;
  height: 15px;
}

.comment .bottom .icon_text div {
  font-size: 14px;
}

.comment .zan {
  color: #999999;
  font-size: 12px;
  display: flex;
  /* margin-top: 5px; */
}
.comment .zan > div {
  margin-right: 40px;
  line-height: 16px;
  display: flex;
  align-items: center;
}

.comment .zan div img {
  margin-right: 10px;
}
.comment .zan div:last-child {
  margin-right: 0px;
}

.imgShow {
  margin-top: 16px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
}
.image_div {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ededed;
  cursor: pointer;
}
.officalBox {
  box-sizing: border-box;
  padding: 20px;
  padding-left: 10px;
  padding-top: 15px;
  margin-top: 16px;
  position: relative;
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 6px;
}
.officalBoxTop {
  display: flex;
  justify-content: space-between;
}
.officalBoxText {
  padding-left: 10px;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  /* padding: 20px; */
  /* padding-bottom: 10px; */
}
.officalBoxTop .time {
  color: #878787;
}
.officalBox-content {
  height: 100%;
}
.officalBoxText span {
  line-height: 20px;
}
.text-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.text-box span {
  color: #656565;
}
.bottom .icon_span:first-child {
  float: left;
  height: auto;
  display: flex;
  font-size: 14px;
  align-items: center;
}
.bottom .icon_span div {
  display: flex;
  align-items: center;
}
.bottom .icon_span:last-child {
  float: right;
  display: flex;
  font-size: 14px;
  align-items: center;
}
.icon_span img {
  margin-right: 6px;
  width: 14px;
  height: 16px;
  display: inline-block;
}
.comment .bottom .comment_time {
  display: flex;
  align-items: center;
}
.comment .bottom .comment_time img {
  height: 14px;
  bottom: 0px;
}

.location {
  width: 14px !important;
  height: 16px;
}
.selects .push {
  float: right;
  width: 121px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  background: rgba(243, 75, 21, 1);
  border-radius: 16px;
  /* font-size:16px;
        font-family:Microsoft YaHei;
        color:rgba(254,254,254,1); */
}
.selects .push a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(254, 254, 254, 1);
}
// 列表样式end
::v-deep .el-pagination__total {
  margin: 0 15px;
}
.comment .bottom .location {
  top: 0;
}
</style>
